<template>
  <div class="con" v-if="total > 0">
    <div class="c_item" v-for="item in data" :key="item.id">
      <div class="item">
        <div class="i_top">
          <div class="p_item">{{ item.create_time }}</div>
          <div class="p_icon" style="cursor: pointer" @click="del(item.id)">
            <el-icon>
              <Delete />
            </el-icon>
            删除
          </div>
        </div>
        <div class="wz">
          <div class="text">
            {{ item.content }}
          </div>
        </div>
      </div>
      <div
        class="item_1"
        style="cursor: pointer"
        @click="particulars(item.article_id, item.source)"
        v-if="item.article.image"
      >
        <img :src="item.article.image" alt="" class="imgs" />
        <div class="wb">
          <div class="title">{{ item.article.title }}</div>
          <div class="tet">
            <div class="text" v-html="item.article.content"></div>
          </div>
        </div>
      </div>
      <div
        class="item_1"
        style="cursor: pointer"
        @click="particulars(item.article_id, item.source)"
        v-else
      >
        <!-- <img :src="item.user_avatar" alt="" class="imgs" /> -->
        <div class="wb">
          <div class="title">{{ item.article.title }}</div>
          <div class="tet1">
            <div class="text" v-html="item.article.content"></div>
          </div>
        </div>
      </div>
      <div class="br"></div>
    </div>
    <div class="con_bom" v-if="total > 0">
      <div class="cc">共{{ total }}条</div>
      <el-pagination
        v-model:page-size="pageSize"
        background
        layout="prev, pager, next"
        :total="total"
        @next-click="nextclick"
        @prev-click="prevclick"
        @change="change1"
      />
    </div>
  </div>
  <div class="rq" v-else>
    <img src="@/image/容器.svg" alt="" />
    <div>暂无信息</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getsource1Api, getcommentdelApi } from '@/api/user'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
let Router = useRouter()
function particulars(id: any, source: any) {
  if (source == 1) {
    // Router.push({ path: '/home/articles', query: { id } })
    window.open(`/pc/home/articles?id=${id}`, '_blank')
  } else {
    // Router.push({ path: '/home/particulars', query: { id } })
    window.open(`/pc/home/particulars?id=${id}`, '_blank')
  }
}
const total = ref(0)
let names = ref({
  self: 1,
  page: 1,
  page_size: 3
})
const data = ref()
const getsource1 = () => {
  getsource1Api(names.value).then(res => {
    console.log(res)
    data.value = res.data.data.data
    total.value = res.data.data.total
  })
}
getsource1()
const del = (id: any) => {
  getcommentdelApi({ id: id }).then(res => {
    // console.log(res)
    ElMessage({ message: '删除成功', type: 'success' })
    getsource1()
  })
}
const pageSize = ref(3)
const nextclick = () => {
  names.value.page++
  getsource1()
}
const prevclick = () => {
  names.value.page--
  getsource1()
}
const change1 = (e: any) => {
  console.log(e)
  names.value.page = e
  getsource1()
}
</script>

<style lang="scss" scoped>
.rq {
  width: 100%;
  height: 1200px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  // margin-top: 100px;

  img {
    margin-top: 200px;
    width: 228px;
    height: 226px;
  }
}

.con {
  position: relative;
  height: 1200px;
  margin-top: -18px;
  margin-left: -16px;
  width: 800px;
  background-color: #fff;

  .c_item {
    .item {
      padding: 17px 16px 0;

      .wz {
        width: 752px;
        margin: 10px 0 17px 16px;
        font-size: 14px;
        color: #1a1a1a;
        // overflow: hidden; /* 隐藏溢出内容 */
        // text-overflow: ellipsis; /* 当文本溢出时，使用省略号表示 */
        // .text {
        //   display: -webkit-box; /* 启用弹性盒子布局 */
        //   -webkit-line-clamp: 2; /* 限制显示2行文本 */
        //   -webkit-box-orient: vertical; /* 垂直方向排列子元素 */
        //   overflow: hidden; /* 隐藏溢出内容 */
        //   text-overflow: ellipsis; /* 当文本溢出时，使用省略号表示 */
        // }
      }

      .i_top {
        display: flex;
        justify-content: space-between;

        .p_item {
          font-size: 12px;
          margin-left: 16px;
          color: #1a1a1a;
        }

        .p_icon {
          font-size: 12px;
          color: #e02020;

          .el_icon {
            margin-right: 2px;
          }
        }
      }
    }

    .item_1 {
      display: flex;
      padding: 0 16px;

      // border-bottom: 1px solid #e5e5e5;
      .imgs {
        margin-top: 20px;
        margin-right: 16px;
        width: 160px;
        height: 110px;
        background-color: blue;
      }

      .wb {
        .title {
          margin: 17px 0 13px 0;
          font-size: 16px;
          font-weight: 600;
          color: #1a1a1a;
        }

        .tet {
          font-size: 12px;
          color: #999999;
          overflow: hidden;
          /* 隐藏溢出内容 */
          text-overflow: ellipsis;
          /* 当文本溢出时，使用省略号表示 */
          width: 601px;

          /* 定义容器宽度 */
          .text {
            display: -webkit-box;
            /* 启用弹性盒子布局 */
            -webkit-line-clamp: 4;
            /* 限制显示2行文本 */
            -webkit-box-orient: vertical;
            /* 垂直方向排列子元素 */
            overflow: hidden;
            /* 隐藏溢出内容 */
            text-overflow: ellipsis;
            /* 当文本溢出时，使用省略号表示 */
          }
        }

        .tet1 {
          font-size: 12px;
          color: #999999;
          overflow: hidden;
          /* 隐藏溢出内容 */
          text-overflow: ellipsis;
          /* 当文本溢出时，使用省略号表示 */
          width: 761px;

          /* 定义容器宽度 */
          .text {
            display: -webkit-box;
            /* 启用弹性盒子布局 */
            -webkit-line-clamp: 4;
            /* 限制显示2行文本 */
            -webkit-box-orient: vertical;
            /* 垂直方向排列子元素 */
            overflow: hidden;
            /* 隐藏溢出内容 */
            text-overflow: ellipsis;
            /* 当文本溢出时，使用省略号表示 */
          }
        }
      }
    }

    .br {
      width: 768px;
      margin: 16px 0 32px 16px;
      border-bottom: 1px solid #e5e5e5;
    }
  }

  .con_bom {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;

    .cc {
      width: 60px;
      margin-top: 8px;
    }
  }
}
</style>
